<template>
	<div class="login">
		<img src="../images/bg.png" alt="" />
		<div class="yy"></div>
		<div class="con">
			<div class="tx"></div>
			<form>
				<!--<i class="iconfont icon-daohangshouye font"></i>-->
				<el-input v-model="name" placeholder="输入已验证手机号或邮箱"></el-input>
			</form>
			<form>
				<!--<i class="iconfont icon-daohangshouye font"></i>-->
				<el-input v-model="password" placeholder="输入密码"></el-input>
			</form>
			<div class="zc">
				<router-link tag="span" to="/register">立即注册</router-link>
				<router-link tag="span" to="/back" class="pass">忘记密码</router-link>
			</div>
			<div class="btn" @click="demo">登录</div>
			<div class="qt">
				<div class="ov">
					<div class="x">———————</div>
					<div>其他方式登录</div>
					<div class="x">——————</div>
				</div>
				<div>
					<img src="../images/wx.png" alt="" />
					<img class="wb" src="../images/wb.png" alt="" />
					<img class="qq" src="../images/qq.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"login",
		data(){
			return{
				name:"",
				password:""
			}
		},
		methods:{
			demo(){
				this.$axios.post("http://localhost:3000/login",{
					username:this.name,
       				password:this.password
				})
				.then(res => {
					if(res.data.msg == "登录失败"){
						alert(res.data.msg);
					}else{
						alert("登录成功");
						localStorage.setItem("username", res.data[0].username);
						window.location.href = "http://localhost:8080/#/index/home/Details";
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.login{
		position: relative;
		.yy{
			position: absolute;
			background: rgba(0,0,0,0.2);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.con{
			position: absolute;
			top: 150/50rem;
			left: 55/50rem;
			.qt{
				margin-top: 70/50rem;
				.ov{
					height: ;
					overflow: hidden;
					.x{
						/*width: 50/50rem;
						height: 1/50rem;
						background: #E3E3E3;*/
					}
					div{
						font-size: 13/50rem;
						color:#e3e3e3;
						float: left;
					}
				}
				div{
					img{
						width: 30/50rem;
						height: 30/50rem;
						
					}
					.wb{
						margin-left: 75/50rem;
					}
					.qq{
						margin-left: 74/50rem;
					}
				}
			}
			.btn{
				font-size: 16/50rem;
				color:#fff;
				width: 270/50rem;
				background: #3AAE95;
				opacity: 0.5;
				height: 50/50rem;
				line-height: 50/50rem;
				border-radius: 5/50rem;
				text-align: center;
				margin-top: 20/50rem;
			}
			.zc{
				margin-top: 10/50rem;
				font-size: 16/50rem;
				color:#fff;
				span{
					color:#fff;
				}
				.pass{
					margin-left: 134/50rem;
				}
			}
			.tx{
				width: 100/50rem;
				height: 100/50rem;
				background: #fff;
				border-radius: 50%;
				margin: 0 auto;
			}
			.el-input__inner{
				width: 270/50rem;
				background: #6d6d6d;
				color: #fff;
			}
			form{
				position: relative;
			}
			.hq{
				color:#3AAE95;
				border: 1/50rem solid #3AAE95;
				border-radius: 20/50rem;
				font-size: 13/50rem;
				padding: 3/50rem 10/50rem;
				position: absolute;
				right: 10/50rem;
				top: 35/50rem;
			}
		}
	}
</style>